<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog :title="`修改用户密码(${props.userInfo.nickname})`" v-model="props.visible" @close="close">
    <el-divider />
    <el-form style="width: 93%;" ref="ruleFormRef" :model="formData" :rules="rules" label-width="auto" status-icon>
      <el-form-item label="修改密码类型" prop="field_name">
        <el-select v-model="formData.field_name" placeholder="Select" size="large" style="width: 240px">
          <el-option label="登录密码" value="login_secret" />
          <el-option label="支付密码" value="pay_secret" />
        </el-select>
      </el-form-item>
      <el-form-item :label="formData.field_name === 'login_secret' ? '登录密码' : '支付密码'" prop="login_secret">
        <el-input v-model="formData.login_secret" type="password" placeholder="请输入密码" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="login_secret_confirmation">
        <el-input v-model="formData.login_secret_confirmation" type="password" autocomplete="off" show-password
          placeholder="请输入确认密码" />
      </el-form-item>
    </el-form>
    <el-divider />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { userUpdateBase } from "@/api/user";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => { }
  }
});

const emit = defineEmits(['close', 'submit']);
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
  field_name: [
    { required: true, message: '请选择修改密码类型', trigger: 'blur' },
  ],
  login_secret: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      message: '密码长度至少为6位',
      trigger: 'blur'
    }
  ],
  login_secret_confirmation: [
    {
      required: true,
      message: '请输入确认密码',
      trigger: 'blur'
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== formData.value.login_secret) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

const formData = ref({
  login_secret: "",
  field_name: "login_secret",
  login_secret_confirmation: ""
});

// 
const close = () => {
  emit('close', false);
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userUpdateBase({
        id: props.userInfo.id,
        field_name: formData.value.field_name,
        value: formData.value.login_secret
      }).then((res: any) => {
        close();
        if (res.code === 200) {
          ElMessage.success('修改成功!');
          emit('submit');
        }
      });
    }
  })
};
</script>

<style></style>
